<template>
	<page>
	<block v-for="(allItem,index) in workerAllCat">
		<view class='weui-cells__title red-color'>{{allItem.category.name}}</view>
		<view class='weui-cells weui-cells_after-title'>
			<view class="weui-cell">
				<view class="weui-cell__bd  workers-type-wrap">
					<view v-for="(item,index) in allItem.category.children" class='workers-type dp-flex-xy-center' :class="chooseDetailWorker == item.category.id ? 'workers-type-choose' : ''"
					 :data-id="item.category.id" :data-money="item.category.money" :data-name="item.category.name" @tap='chooseDetailWorkerTap'>
						{{item.category.name}}
					</view>
				</view>
				<view class='weui-cell__ft'></view>
			</view>
		</view>
	</block>
	<view class='btn-wrap'>
		<button class="weui-btn mini-btn cancel-btn dp-flex-xy-center" @tap='handleCancelTap'>取消选择</button>
		<button class="weui-btn mini-btn confirm-btn dp-flex-xy-center" type="warn" @tap='handleConfirmTap'>确认选择</button>
		<view class='pb-30'></view>
	</view>
	</page>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	export default {
		onLoad: function(options) {
			let cat = options.cat;
			let type = options.type;
			this.cat = cat;
			this.type = type;
			 this.getWorkerCategory();
		},
		data() {
			return {
				cat: '', // 品类1或品类2
				type: '',

				chooseDetailWorker: '', // 选择品类ID
				chooseDetailWorkerName: '', // 选择品类的名称

				workerAllCat: null, // 品类分类
			}
		},
		methods: {
			// 确认选择
			handleConfirmTap: function() {
				let pages = getCurrentPages(),
				currpage = pages[pages.length - 1],
				prevPage = pages[pages.length - 2];
				let choosedWorkerId = this.chooseDetailWorker;
				let choosedWorkerName = this.chooseDetailWorkerName;

				if (!this.chooseDetailWorker) {
					return uni.showModal({
						title: '选择错误',
						content: `您当前没有选择品类，请重新选择`,
						confirmColor: '#f94c48',
						showCancel: false,
						success: (res) => {}
					});
				}

				let postData = {};
				if (this.cat === '主') {
					prevPage.$vm.categoryMainId = choosedWorkerId;
					prevPage.$vm.categoryMainName = choosedWorkerName;
					postData = {
						merchant_category_id: choosedWorkerId
					};
					//暂时没用，这个
					// if (this.type != '1') {
					// 	prevPage.updataUserInfo(app.globalData.token, postData);
					// }
					uni.navigateBack({})
				} else if (this.cat === '次') {
					prevPage.$vm.categorySubId = choosedWorkerId;
					prevPage.$vm.categorySubName = choosedWorkerName;
					uni.navigateBack({})
				}
			},
			// 取消
			handleCancelTap: function() {
				uni.navigateBack({})
			},
			 // 具体工种类型选择
			  chooseDetailWorkerTap: function (e) {
			    let chooseDetailWorker = e.currentTarget.dataset.id;
			    let chooseDetailWorkerName = e.currentTarget.dataset.name;
			    // let integrityAmount = e.currentTarget.dataset.money; // 选择工种所需支付的诚信金
			    this.chooseDetailWorker=chooseDetailWorker;
				this.chooseDetailWorkerName=chooseDetailWorkerName;
		
			  },
			  // 获取工种
			    getWorkerCategory: function () {
			      gyzjModel.prototype.getMerchantsClass().then((res) => {
			        if (res.code == 1) {
			          this.workerAllCat= res.data;
			        }else {
			          console.log(error)
			        }
			      })
			    },
		}
	}
</script>

<style>
	@import url("../../../static/style/app.css");

	.cat-item {
		flex: 1;
		padding: 20upx 0;
		text-align: center;
		border-bottom: 2px solid transparent;
	}

	.active {
		border-bottom: 2px solid #f94c48;
	}

	/* 工种选择 */
	.workers-type-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.worker-type-radio {
		margin-left: 10upx;
	}

	.workers-type {
		width: 31%;
		box-sizing: border-box;
		padding: 20upx 20upx;
		color: #666;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin: 0 1.167%;
		margin-bottom: 20upx;
		text-align: center;
		font-size: 28upx;
	}

	.workers-type-choose {
		background-color: #f94c48;
		color: #fff;
		border: 1px solid #f94c48;
	}

	.btn-wrap {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100upx;
	}

	.btn-wrap button {
		border-radius: 0;
	}

	.btn-wrap button::after {
		border: none;
	}

	.btn-wrap .confirm-btn {
		flex: 2;
		margin-top: 0;
	}

	.btn-wrap .cancel-btn {
		flex: 1;
		margin-top: 0;
	}

	.pb-30 {
		padding-bottom: 30upx;
	}

	.weui-cells__title {
		text-align: center;
		font-size: 20px;
	}

	page {
		padding-bottom: 120upx;
	}
</style>
